<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,dl,dt,dd,h3{
            margin:0;
            padding:0;
            font-weight:normal;
        }
        aside{
            width:180px;
            margin:0 auto;
        }
        aside h3{
            line-height:2em;
            text-align: center;
            background:#f60;
            color:#fff;
        }
        aside dt{
            padding-left:20px;
            line-height:2em;
            background:#ccc;
            cursor: pointer;
            border-bottom:1px solid #000;
        }
        aside dd{
            display:none;
        }
        aside dd a{
            display:block;
            padding-left:20px;
            line-height:2em;
            font-size:14px;
            text-decoration:none;
            color:#fff;
            background:#aaa;
        }
        aside span{
            float:right;
            margin-right:5px;
        }
    </style>
</head>
<body>
    <aside>
        <h3>食品分类</h3>
        <dl>
            <dt>进口食品<span>+</span></dt>
            <dd>
                <a href="">进口牛奶</a>
                <a href="">巧克力</a>
                <a href="">橄榄油</a>
            </dd>
            <dt>休闲食品<span>+</span></dt>
            <dd>
                <a href="">进奶</a>
                <a href="">巧克力</a>
                <a href="">橄榄</a>
            </dd>
            <dt>茶叶<span>+</span></dt>
            <dd>
                <a href="">普洱</a>
                <a href="">铁观音</a>
                <a href="">大红袍</a>
            </dd>
            <dt>饮料<span>+</span></dt>
            <dd>
                <a href="">进口牛奶</a>
                <a href="">可乐</a>
                <a href="">雪碧</a>
            </dd>
            <dt>进口品<span>+</span></dt>
            <dd>
                <a href="">口牛奶</a>
                <a href="">克力</a>
                <a href="">橄榄油</a>
            </dd>
            <dt>进口食品<span>+</span></dt>
            <dd>
                <a href="">牛奶</a>
                <a href="">巧克力</a>
                <a href="">橄榄油</a>
            </dd>
            <dt>进口品<span>+</span></dt>
            <dd>
                <a href="">进口</a>
                <a href="">巧克力</a>
                <a href="">橄油</a>
            </dd>
        </dl>
    </aside>
    <script>
        var btn=document.querySelectorAll('dt');
        var dd=document.querySelectorAll('dd');
        btn.forEach(function(v,i){
            v.onclick=function(){
                var y=this.nextElementSibling.style.display;
                dd.forEach(function(v1){
                    v1.style.display='none';
                    v1.previousElementSibling.children[0].innerText='+';
                });
                this.nextElementSibling.style.display='block';
                this.children[0].innerText='-';
                if(y==='' || y==='none'){
                    this.nextElementSibling.style.display='block';
                    this.children[0].innerText='-';
                }
                if(y==='block'){
                    this.nextElementSibling.style.display='none';
                    this.children[0].innerText='+';
                }
            }
        });
    </script>
</body>
</html>